<template>
  <view class="income-body">
    <fui-tabs center  :tabs="tabs" @change="change"></fui-tabs>
    <view class="income-content">
       <view> {{showTextContent[defIndex]}}: 0.00</view>
       <view @click="showPicker">{{dateContent}} <fui-icon size="35" name="turningdown"></fui-icon></view>
    </view>

    <view class="content-body">
        <NoData v-if="!dateList" />
        <view v-else class="info-item">
            <view class="income" v-for="item in dateList" :key="item.name">
                <image  class="img" :src="item.image" />
                <view>
                    <view class="income-title">
                    <view> {{item.name}}</view>
                </view>
                <view class="income-title income-body">
                    <view><fui-icon size="30" name="pulldown"></fui-icon>   订单次数:  {{item.promotionCount}}</view>
                    <view><fui-icon size="30" name="aftersale"></fui-icon>  实际收益: {{item.totalIncome / 100}}</view>
                </view>
                </view>
            </view>

    </view>
    </view>

  </view>
  <fui-date-picker :show="show" type="2" @change="pickerChange" @cancel="showPicker"></fui-date-picker>

</template>

<script setup lang="ts">
import NoData from "@/components/NoData/NoData.vue";
import  dyUserPlayingService  from "@/api/dyUserPlayingService";
const tabs= ref(['广告收益','支付收益'])
const defIndex = ref(0)
const show = ref(false)
const showTextContent = ref(['广告总收益','会员总收益'])
const dateContent = ref("2024-03")
const change = (e:any)=>{
    defIndex.value = e.index
}
const dateList = ref()
const pickerChange = (e:any)=>{
    dateContent.value = e.result
    showPicker()
    getInComeInfoByDate()
}
const showPicker = ()=>{
    show.value = !show.value
}
const getInComeInfoByDate = async ()=>{
    const {success,result} =  await dyUserPlayingService.getInComeInfoByDate({date:dateContent.value})
    if(success){
        dateList.value = result
    }
}
onLoad(()=>{
    getInComeInfoByDate()
})
</script>
<style>

</style>
<style lang="scss" scoped>
.income-body{
    padding: 28rpx;
    font-size: 28rpx;
    .income-content{
        font-size:24rpx ;
        margin-top: 28rpx;
        padding: 19rpx;
        color: white;
        border-radius: 10rpx;
        background: linear-gradient(to bottom, rgb(131,115,239), rgb(113,93,227)); /* 从左到右渐变，颜色从红色到黄色 */
        display: flex;
        justify-content: space-between;
    }
    .info-item{
        .income{
            background: linear-gradient(to bottom, rgb(214, 232, 255), rgb(251, 255, 255));
            padding: 20rpx;
            padding-right: 0;
            margin: 20rpx 0;
            border-radius: 20rpx;
            display: flex;
            font-size: 26rpx;
            align-items: center;
            .img{
                border-radius: 20rpx;
                width: 120rpx;
                height: 120rpx;
            }
            .income-title{
                display: flex;
                justify-content: space-between;
                width: 500rpx;
                margin:0 20rpx;
                view{
                    margin-bottom: 20rpx;
                }
            }
            .income-body{
                color: rgb(111,92,227);
                height: 40rpx;
                background: rgb(239,237,250);
                line-height: 40rpx;
                padding: 4rpx 10rpx;
                font-size: 23rpx;
                border-radius: 20rpx;
              

            }
        } 
    }   

}
</style>
